<!--雨天动画-->
<template>
    <div class="container" :style="`opacity: ${opacity};`" data-tauri-drag-region>
        <div class="storm">
            <div class="cloud">
                <div class="cloud big"></div>
                <div class="eyes">
                    <div class="eyes left"></div>
                    <div class="eyes right"></div>
                </div>
            </div>
        </div>
        <div class="temp">
            <span style="font-size: 10vmin;">{{ weatherData.temp }}° / {{ weatherData.desc }}</span>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, watch } from 'vue'
import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
import { getCurrentWindow } from '@tauri-apps/api/window';
import { throttle } from 'lodash'
import { useWindow } from '../hooks/useWindows'

let container: any;
let leftEye: any;
let rightEye: any;

const { convertToScreen, clearCachedWindowPosition } = useWindow();


const props = defineProps<{
    opacity: number,
    weatherData: any,
    mouse: any
}>()

watch(props.mouse, async (value: any) => {
    const { winX, winY } = await convertToScreen("desktopWidget", value.x, value.y);
    //console.log(value)
    throttledMoveEyes(winX, winY);
})



const moveEyes = (mouseX: number, mouseY: number) => {
    if (!container || !leftEye || !rightEye) return
    const rect = container.getBoundingClientRect()
    // 云的中心
    const centerX = rect.left + rect.width / 2
    const centerY = rect.top + rect.height / 2
    // 鼠标与中心的相对距离
    const dx = mouseX - centerX
    const dy = mouseY - centerY
    // 限制最大移动距离
    const maxMove = 5 // px
    const distance = Math.min(maxMove, Math.sqrt(dx * dx + dy * dy))
    const angle = Math.atan2(dy, dx)
    const moveX = Math.cos(angle) * distance
    const moveY = Math.sin(angle) * distance
    // 设置 transform
    leftEye.style.transform = `translate(${moveX - 2}px, ${moveY}px)`
    rightEye.style.transform = `translate(${moveX + 2}px, ${moveY}px)`
}

const throttledMoveEyes = throttle(moveEyes, 16) // 约60fps


const listenerWind =async () => {
    const currentWindow = await WebviewWindow.getCurrent();
    currentWindow.onMoved((event) => {
        clearCachedWindowPosition("desktopWidget")
    })  
}


onMounted(() => {
    container = document.querySelector('.container')
    leftEye = document.querySelector('.eyes.left') as HTMLElement
    rightEye = document.querySelector('.eyes.right') as HTMLElement
    document.addEventListener("mousedown", () => {
        getCurrentWindow().startDragging();
    })
    listenerWind()
})
</script>
<style scoped>
.container {
    font-size: 4vmin;
    margin: auto;
    width: 12em;
    height: 13em;
}

.cloud {
    position: absolute;
    background: #d5daf8;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#85a0d9), to(#d5daf8));
    background-image: -webkit-linear-gradient(bottom, #85a0d9 0%, #d5daf8 100%);
    background-image: -o-linear-gradient(bottom, #85a0d9 0%, #d5daf8 100%);
    background-image: linear-gradient(to top, #85a0d9 0%, #d5daf8 100%);
    border-radius: 3em;
}

.cloud:before,
.cloud:after {
    position: absolute;
    content: "";
    z-index: -1;
    background: #d5daf8;
    border-radius: 100%;
}

.cloud.big {
    top: 2.5em;
    width: 12em;
    height: 3.5em;
}

.cloud.big:before {
    top: -1.5em;
    left: 1.5em;
    width: 4em;
    height: 3.5em;
}

.cloud.big:after {
    top: -2.5em;
    left: 4.5em;
    width: 6em;
    height: 4.5em;
}

.eyes {
    position: absolute;
    top: 1.5em;
    width: 0.8em;
    height: 1.5em;
    border-radius: 100%;
}

.eyes.left {
    left: 4.5em;
    background: #282541;
}

.eyes.right {
    left: 7em;
    background: #282541;
}

.rain {
    position: absolute;
    z-index: -1;
    top: 3em;
    width: 0.2em;
    height: 1em;
    border-radius: 100%;
    -webkit-animation: rainFall 0.8s infinite both ease-in;
    animation: rainFall 0.8s infinite both ease-in;
}

.rain:nth-child(1) {
    left: 6em;
    background: #89ade7;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.rain:nth-child(2) {
    left: 8em;
    background: #89ade7;
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
}

.rain:nth-child(3) {
    left: 2em;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    background: #89ade7;
}

.rain:nth-child(4) {
    left: 5em;
    background: rgba(137, 173, 231, 0.8);
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
}

.rain:nth-child(5) {
    left: 8em;
    background: rgba(137, 173, 231, 0.8);
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.rain:nth-child(6) {
    left: 5em;
    background: rgba(137, 173, 231, 0.5);
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s;
}

.rain:nth-child(7) {
    left: 3em;
    background: #89ade7;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.rain:nth-child(8) {
    left: 8em;
    background: #89ade7;
    -webkit-animation-delay: 0.45s;
    animation-delay: 0.45s;
}

.rain:nth-child(9) {
    left: 10em;
    background: rgba(137, 173, 231, 0.5);
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.rain:nth-child(10) {
    left: 6em;
    background: #89ade7;
    -webkit-animation-delay: 0.55s;
    animation-delay: 0.55s;
}

.rain:nth-child(11) {
    left: 2em;
    background: rgba(137, 173, 231, 0.8);
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.rain:nth-child(12) {
    left: 7em;
    background: #89ade7;
    -webkit-animation-delay: 0.65s;
    animation-delay: 0.65s;
}

.rain:nth-child(13) {
    left: 5em;
    background: rgba(137, 173, 231, 0.5);
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

.rain:nth-child(14) {
    left: 3em;
    background: rgba(137, 173, 231, 0.5);
    -webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
}

.rain:nth-child(15) {
    left: 9em;
    background: rgba(137, 173, 231, 0.5);
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

.thunder svg {
    width: 5em;
    height: 5em;
}

.thunder-time {
    position: absolute;
    z-index: -1;
    top: 5.125em;
    left: 3.5em;
}

.thunder-time .thunder {
    color: transparent;
    -webkit-transform: skew(-25deg);
    -ms-transform: skew(-25deg);
    transform: skew(-25deg);
    -webkit-animation: bolt 3s 1s linear infinite;
    animation: bolt 3s 1s linear infinite;
}

.thunder-time .thunder span {
    font-size: 7.5em;
}

.bolt-icon {
    animation: bolt 3s 1s linear infinite;
}

.temp {
    position: absolute;
    top: 12em;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: #95b5ff;
    user-select: none;
    text-shadow: 0 0 2px #95b5ff;
}

@keyframes bolt {
    0% {
        fill: transparent;
        filter: none;
    }

    10% {
        fill: #fbdb2a;
        filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.25));
    }

    15% {
        fill: #fbdb2a;
        filter: none;
    }

    50%,
    100% {
        fill: transparent;
        filter: none;
    }
}

@-webkit-keyframes rainFall {
    100% {
        -webkit-transform: translate3d(0, 80vh, 0);
        transform: translate3d(0, 80vh, 0);
    }
}

@keyframes rainFall {
    100% {
        -webkit-transform: translate3d(0, 80vh, 0);
        transform: translate3d(0, 80vh, 0);
    }
}

.storm {
    position: relative;
    animation: cloudFloat 4s ease-in-out infinite;
}

@keyframes cloudFloat {
    0% {
        transform: translateX(-10);
    }

    50% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(-10);
    }
}
</style>